<script setup lang="ts">
type OptionType = {
  label: string
  value: string | number
  numKey?: string
}
interface IProp {
  options: Array<OptionType>
  nums?: any
}
defineProps<IProp>()
const model = defineModel()

interface IEmits {
  (e: 'change', value: string | number): void
}
const emits = defineEmits<IEmits>()

const onClick = (value: string | number) => {
  model.value = value
  emits('change', value)
}
</script>

<template>
  <section class="filter-wrapper">
    <el-button
      v-for="item in options"
      :key="item.value"
      :type="model === item.value ? 'primary' : 'default'"
      @click="onClick(item.value)"
    >
      {{ item.label }}
      <template v-if="nums && item.numKey">({{ nums[item.numKey] }})</template>
    </el-button>
  </section>
</template>

<style lang="scss" scoped>
.filter-wrapper {
  margin-bottom: 10px;
}
</style>
